<template>
    <van-nav-bar :title="route.meta.title" left-arrow @click-left="router.replace('/home')" fixed placeholder />
    <div class="wrapper">
        <div class="main">
            <div class="good_img">
                <img :src="goodsDetail.pic_url" alt="">
            </div>
            <p class="good_price">￥{{ (goodsDetail.price - 0).toFixed(2) }}</p>
            <div class="good_name">{{ goodsDetail.name }}</div>
            <p class="good_brands">品牌商：{{ goodsDetail.brand }}</p>
            <div class="good_express_prompt">
                <span>
                    库存：{{ goodsDetail.stock }}
                </span>
                <span>免邮费 顺丰快递</span>
            </div>
            <div>
                <p class="good_detail_title">商品详情</p>
                <p class="good_detail_info">{{ goodsDetail.detail_info }}</p>
            </div>
        </div>
    </div>
    <van-action-bar placeholder>
        <van-action-bar-icon icon="cart-o" :badge="store.count ? store.count : ''" text="购物车"
            @click="$router.push('/cart')" />
        <van-action-bar-icon :icon="goodsDetail.is_collect ? 'star' : 'star-o'" text="收藏"
            :color="goodsDetail.is_collect ? '#ff5000' : '#323233'" @click="collect" />
        <van-action-bar-button type="warning" text="加入购物车" @click="add" />
        <van-action-bar-button type="danger" text="立即购买" @click="buy" />
    </van-action-bar>
</template>
    
<script  setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { getGoodDetails } from '@/api/goods.js'
import { addCart, updateCart } from '@/api/cart.js'
import { useCartStore } from '@/stores/cart.js'
import { useAddressStore } from '@/stores/address.js'


import { addCollection, deleteCollectionById } from '@/api/collection.js'
const route = useRoute()
const router = useRouter();
const store = useCartStore()
const addressStore = useAddressStore()
let goodsDetail = ref({})

onMounted(async () => {
    let res = await getGoodDetails({ id: route.params.id })
    goodsDetail.value = res.data
})
let add = async () => {
    let isExistence
    //如果isExistence为-1表明从没添加至购物车调用添加api，反之调用更新api通过订单id找对应count+1
    isExistence = store.data.findIndex(item => item.goods_id == goodsDetail.value.id)
    if (isExistence != -1) {
        await updateCart({
            //商品id
            goods_id: goodsDetail.value.id,
            //购物车中该商品数量+1
            count: store.data[isExistence].count - 0 + 1,
            //订单id，每个商品算一个订单
            id: store.data[isExistence].id
        })

    } else {
        await addCart({
            goods_id: goodsDetail.value.id,
            count: 1
        })
    }
    store.getCart()
}

let collect = async () => {
    if (goodsDetail.value.is_collect) {
        await deleteCollectionById({
            object_id: goodsDetail.value.id,
            type: 1
        })
    } else {
        await addCollection({
            object_id: goodsDetail.value.id,
            type: 1
        })
    }
    let res = await getGoodDetails({ id: route.params.id })
    goodsDetail.value = res.data
}


let buy = () => {
    let index = addressStore.data.findIndex(item => {
        return item.isDefault == true
    })
    //如果没有默认地址或是从没添加过地址要去地址列表页面选择地址
    if (addressStore.data.length == 0 || index == -1) {
        router.push({
            name: 'address',
            query: {
                goodsInfo:
                    btoa(encodeURI(JSON.stringify([{
                        count: 1,
                        goodsInfo: goodsDetail.value,
                    }])))
            }
        })
    } else {
        //有默认地址就直接使用默认地址
        router.push({
            name: 'createOrder',
            query: {
                orderInfo:
                    btoa(encodeURI(JSON.stringify({
                        goods: [{
                            count: 1,
                            goodsInfo: goodsDetail.value,
                        }],
                        adress: addressStore.data[index]
                    })))
            }
        })

    }


}

</script>
    
<style  lang="scss" scoped>
.wrapper {
    width: 100%;
}

.main {
    margin: 0 .2667rem;
    background-color: white;

    .good_img {
        width: 100%;

        img {
            width: 100%;
        }
    }

    .good_price {
        padding: 0.16rem 0.21333rem;
        color: #f63515;
        font-size: .58667rem;
        /*     margin: 0.16rem 0; */
    }

    .good_name {
        padding: 0 0.21333rem;
        background-color: #fff;
        font-size: .48rem
    }

    .good_brands,
    .good_express_prompt {
        padding: 0.16rem 0.21333rem;
        display: flex;
        justify-content: space-between;
        color: #999;
        font-size: .37333rem;
    }

    .good_detail_title {
        margin: 0.26667rem 0;
        font-weight: 700;
        font-size: .37333rem;
        color: #000;
        text-align: center;
    }

    .good_detail_info {
        min-height: 1.1333rem;
        padding: 0 0.32rem;
        font-size: .42667rem;
        color: #545454;
        text-indent: 2em;
    }
}
</style>